<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity"
                 style="padding-bottom: 0px;">
          <!--          <el-form-item label="">-->
          <!--            <el-input v-model="params.entity.id"-->
          <!--                      placeholder="请输入"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="订单流水号">-->
          <!--            <el-input v-model="params.entity.shopNumber"-->
          <!--                      placeholder="请输入订单流水号"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="订单类型">
            <!--            <el-input v-model="params.entity.orderType"-->
            <!--                      placeholder="请输入订单类型，21-团购，31-预售，41、90-，51、70-次卡，60-券交易"/>-->
            <el-select v-model="params.entity.orderType" placeholder="请选择订单类型"
                       style="width:160px">
              <el-option label="团购-21" :value=21></el-option>
              <el-option label="预售-31" :value=31></el-option>
              <el-option label="外卖-41" :value=41></el-option>
              <el-option label="外卖-90" :value=90></el-option>
              <el-option label="次卡-51" :value=51></el-option>
              <el-option label="次卡-70" :value=70></el-option>
              <el-option label="券交易-60" :value=60></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="订单状态">
            <el-select v-model="params.entity.orderStatus" placeholder="请选择订单类型"
                       style="width:160px">
              <el-option label="初始化" :value=0></el-option>
              <el-option label="待支付" :value=100></el-option>
              <el-option label="订单关闭" :value=101></el-option>
              <el-option label="支付成功" :value=200></el-option>
              <el-option label="待使用" :value=201></el-option>
              <el-option label="交易成功" :value=1></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="账户信息">-->
          <!--            <el-input v-model="params.entity.accountId"-->
          <!--                      placeholder="请输入账户信息"/>-->
          <!--          </el-form-item>-->
<!--          <el-form-item label="账户名称">-->
<!--            <el-input v-model="params.entity.accountName"-->
<!--                      placeholder="请输入账户名称"/>-->
<!--          </el-form-item>-->

<!--          <el-form-item label="所属团队长">-->

<!--            <el-tree-select-->
<!--                v-model="params.entity.searchAdminIds"-->
<!--                :data="adminTrees"-->
<!--                multiple-->
<!--                :render-after-expand="false"-->
<!--                show-checkbox-->
<!--                check-strictly-->
<!--                check-on-click-node-->
<!--                style="width: 240px"-->
<!--            />-->
<!--          </el-form-item>-->

          <!--          <el-form-item label="门店ID">-->
          <!--            <el-input v-model="params.entity.poiId"-->
          <!--                      placeholder="请输入门店ID"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="门店名称">
            <el-input v-model="params.entity.poiName"
                      placeholder="请输入门店名称"/>
          </el-form-item>
          <!--          <el-form-item label="商品数量">-->
          <!--            <el-input v-model="params.entity.num"-->
          <!--                      placeholder="请输入商品数量"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="商品ID">-->
          <!--            <el-input v-model="params.entity.productId"-->
          <!--                      placeholder="请输入商品ID"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="商品名称">
            <el-input v-model="params.entity.productName"
                      placeholder="请输入商品名称"/>
          </el-form-item>
          <!--          <el-form-item label="订单原始金额">-->
          <!--            <el-input v-model="params.entity.originalAmount"-->
          <!--                      placeholder="请输入订单原始金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="订单实收金额(核心)pay_amount+payment_discount">-->
          <!--            <el-input v-model="params.entity.receiptAmount"-->
          <!--                      placeholder="请输入订单实收金额(核心)pay_amount+payment_discount"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="实收金额">-->
          <!--            <el-input v-model="params.entity.paymentDiscount"-->
          <!--                      placeholder="请输入实收金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="订单金额">-->
          <!--            <el-input v-model="params.entity.payAmount"-->
          <!--                      placeholder="请输入订单金额"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="订单时间">-->
          <!--            <el-input v-model="params.entity.payTime"-->
          <!--                      placeholder="请输入订单时间"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="状态 0-停用 1-启用 2-备用">-->
          <!--            <el-input v-model="params.entity.statusFlag"-->
          <!--                      placeholder="请输入状态 0-停用 1-启用 2-备用"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="是否删除 0-否 1-是">-->
          <!--            <el-input v-model="params.entity.delFlag"-->
          <!--                      placeholder="请输入是否删除 0-否 1-是"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建人">-->
          <!--            <el-input v-model="params.entity.createUser"-->
          <!--                      placeholder="请输入创建人"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="创建时间">-->
          <!--            <el-input v-model="params.entity.createTime"-->
          <!--                      placeholder="请输入创建时间"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="修改时间">-->
          <!--            <el-input v-model="params.entity.updateTime"-->
          <!--                      placeholder="请输入修改时间"/>-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="备注">-->
          <!--            <el-input v-model="params.entity.remark"-->
          <!--                      placeholder="请输入备注"/>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询
            </el-button>
<!--            <el-button type="primary" :icon="Plus" @click="addDialog">新增-->
<!--            </el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }"
              @selection-change="handleSelectionChange">
      <!--      <el-table-column prop="id" label="ID" show-overflow-tooltip/>-->
      <el-table-column prop="orderId" label="订单号" show-overflow-tooltip/>
      <el-table-column prop="orderTypeName" label="订单类型" show-overflow-tooltip/>
      <el-table-column prop="orderStatusName" label="订单状态"
                       show-overflow-tooltip/>

      <el-table-column prop="adminName" label="城市区域合伙人" show-overflow-tooltip/>
<!--      <el-table-column prop="accountId" label="账户信息" show-overflow-tooltip/>-->
<!--      <el-table-column prop="accountName" label="账户名称" show-overflow-tooltip/>-->
      <el-table-column prop="poiId" label="门店ID" show-overflow-tooltip/>
      <el-table-column prop="poiName" label="门店名称" show-overflow-tooltip/>
      <!--      <el-table-column prop="num" label="商品数量" show-overflow-tooltip/>-->
      <el-table-column prop="productId" label="商品ID" show-overflow-tooltip/>
      <el-table-column prop="productName" label="商品名称" show-overflow-tooltip/>
      <el-table-column prop="originalAmount" label="订单原始金额"
                       show-overflow-tooltip/>
      <el-table-column prop="receiptAmount" label="订单实收金额(核心)" width="100"
                       show-overflow-tooltip/>
      <!--      <el-table-column prop="paymentDiscount" label="实收金额" show-overflow-tooltip/>-->
      <!--      <el-table-column prop="payAmount" label="订单金额" show-overflow-tooltip/>-->
      <el-table-column prop="payTime" label="订单时间" show-overflow-tooltip/>
      <!--      <el-table-column prop="statusFlag" label="状态 0-停用 1-启用 2-备用"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="delFlag" label="是否删除 0-否 1-是"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createUser" label="创建人"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createTime" label="创建时间"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="updateTime" label="修改时间"-->
      <!--                       show-overflow-tooltip/>-->
      <el-table-column prop="remark" label="备注" show-overflow-tooltip/>

<!--      <el-table-column fixed="right" label="操作" width="150"-->
<!--                       show-overflow-tooltip>-->
        <!--        <template #header>-->
        <!--          <el-input v-model="params.search" @keyup.enter.native="searchData" placeholder="搜索角色名称/介绍"/>-->
        <!--        </template>-->
<!--        <template #default="scope">-->
<!--          <el-button link type="danger" :icon="Delete" size="small"-->
<!--                     @click="showDeleteDialog(scope.row.id)">删除-->
<!--          </el-button>-->
<!--          <el-button link type="primary" :icon="Edit" size="small"-->
<!--                     @click="editDialog(scope.row)">编辑-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <el-pagination v-model:currentPage="params.current"
                   v-model:page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]"
                   layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增或者修改页面-->
  <RetailOrderAddOrEdit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :addDataType="addDataType"></RetailOrderAddOrEdit>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Setting
} from '@element-plus/icons-vue'
import RetailOrderAddOrEdit from './retailOrderAddOrEdit.vue'
import {RetailOrder}
  from "@/apis/model/order/RetailOrderModel";
import {
  deleteRetailOrderById,
  retailOrderPage
} from "@/apis/http/order/RetailOrderHttp";
import {adminSimpleTree} from "@/apis/http/system/AdminHttp";
import {userStore} from "@/store";

const store = userStore();
const userInfo = store.userInfo;

const userOperaPermit = ref(false)

// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {
    userType: userInfo.userType
  } as RetailOrder
})

const ruleForm = ref<RetailOrder>({} as RetailOrder)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');

// const adminTrees = ref([])

/**
 * 初始化数据
 */
const initList = () => {
  initPermit();
  loading.value = true
  retailOrderPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as RetailOrder
  addDataType.value = 'add'
}

//修改弹窗
const editDialog = (row: RetailOrder) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除?',
      '提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteRetailOrderById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}

const initPermit = () => {
  let roleIds = userInfo.roles;
  userOperaPermit.value = (roleIds.length == 1 && roleIds.includes(3)) ? false : true;
}

// const initAdminTree = () => {
//   adminSimpleTree().then(res => {
//     adminTrees.value = res.data;
//   })
// }

onMounted(() => {
  // initAdminTree();
  initPermit();
  initList()
})
</script>

<style>
</style>
